<script setup>
import { onMounted, reactive, ref } from 'vue';
import axios from 'axios';
import st1 from '../assets/imgs/1.png'
import st2 from '../assets/imgs/2.png'
import st3 from '../assets/imgs/3.png'
import st4 from '../assets/imgs/4.png'
import st5 from '../assets/imgs/5.png'
import st6 from '../assets/imgs/6.png'
import st7 from '../assets/imgs/7.png'
import st8 from '../assets/imgs/8.png'
import st9 from '../assets/imgs/9.png'
import st10 from '../assets/imgs/10.png'

const config = reactive({
    data: [],
    unit: '个',
    img: [st1,st2,st3,st4,st5,st6,st7,st8,st9,st10],
    showValue: true,
    //textColor: "lightyellow"
})
function getData() {
    //获取服务器数据
    axios.get('/Pro-Postgraduate/queryAllToptenUniversitiesMajors')
        .then((response) => {
            console.log(response.data)
            //if (response.data.code == 200) {
                let obj = reactive({})
                for (let index = 0; index < response.data.length; index++) {
                    let yobj = response.data[index];
                    obj = {
                        name: yobj.schoolName,
                        value: yobj.totalMajors
                    }
                    config.data.push(obj)
                }
            //}

        })
}
onMounted(() => {
    getData();
})
</script>
<template>
        <div>
            <h3 style="padding-top: 15px;color: azure;position: fixed;top:45%;left: 35%;">招生专业最多十大高校</h3>
            <dv-decoration-4 :reverse="true" style="width:190px;height:5px;position: fixed;left:35%;top: 51.5%;" />
            <dv-conical-column-chart :config="config" 
            style="width: 850px;height: 220px;position: fixed;margin-left: -10%;margin-top: -5%;" />
        </div>
</template>
<style lang="css" scoped>

</style>
